<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/reset.css">
    <title>小米搜索框</title>
    <style>
        .outer{
            width: 200px;
            background-color: whitesmoke;
            padding: 20px;
        }
        #search {
            border: 1px solid black;
        }

        .products {
            width: 162px;
            border:1px solid orange;
            display: none;
        }
    </style>
</head>

<body>
    <div class="outer">
        <input type="search" name="search" id="search" placeholder="请输入商品">
        <ul class="products">
            <li>全部商品</li>
            <li>小米14</li>
            <li>小米笔记本</li>
            <li>小米空调</li>
            <li>小米冰箱</li>
            <li>小米音箱</li>
        </ul>
    </div>
<script>
    // 获取输入框、商品列表
    const search = document.querySelector('[type=search]')
    const ul=document.querySelector('.products')
    // 获取焦点
    search.addEventListener('focus',function(){
        // 显示列表
        ul.style.display='block'
        // 输入框颜色改变
        search.style.borderColor='orange'
    })
    // 失去焦点
    search.addEventListener('blur',function(){
        // 隐藏列表
        ul.style.display='none'
        // 颜色变为黑色
        search.style.borderColor='black'
    })
</script>
</body>

</html>